@charset'UTF-8';

/**
 * 春节
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2016/01/04
 */

@import'../_components/variables.scss';
@import'../_components/_mixin.scss';
@import'../_components/reset.scss';
@import'../_components/column.scss';
@import'../_components/button.scss';
@import'../assets/ymtUI.scss';
@import'../assets/ymt_components.scss';
@import'../assets/common.scss';
@import'../black_five/_proList.scss';
@import'../assets/_global_good.scss';
@import '../assets/animation/poker.scss';

$imgPath:'/images/spring_festival/';
$imgPath:'http://staticontent.ymatou.com/images/activity/spring_festival/';

@include productList(#f04528,#f04528);

.bg__full{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.ios-bartools {
    height: $rem*150;
    &-wrapper {
        background: rgba(255, 255, 255, 0.92);
        height: $rem*150;
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: $rem*2 solid rgba(0, 0, 0, .5);
        padding-top: $rem*70;
        h2 {
            font-size: $rem*38;
            text-align: center;
            color: #333;
            font-weight: bold;
        }
    }
}

.sf-container{
    background:#f04528;
}

.sf-hd{
    height: $rem*457;
    background: url(#{$imgPath}sf_header.jpg) no-repeat;
        background-size: contain;
}


.poker{
    &-container{
        position: relative;
        background:#f04528;
        overflow: hidden;
    }
    &-rule{
        color:#fff;
        padding:0 $rem*30;
        font-size:$rem*20;
        &-more{
            display: none;
            &.open{
                display: block;
            }
        }
        &-tools{
            text-align: center;
            margin-top: $rem*20;
            &:before{
                content: "展开查看更多"
            }
            .arrow{
                display: inline-block;
                margin-left:$rem*5;
                width: $rem*10;
                height: $rem*10;
                border-left:$rem*3 solid #fff;
                border-bottom:$rem*3 solid #fff;
                transform: rotate(-45deg);
                transition-property: transform;
                transition: transform .45s;
            }
            &.open{
                &:before{
                    content: "收起"
                }
                .arrow{
                    transform: rotate(-225deg);

                }
            }
        }
    }

    &-box{
        position: relative;
        @include clearfix();
        padding:$rem*11;
        margin-right: -$rem*14;
        .card{
            float: left;
            position: relative;
            margin:0 $rem*14 $rem*14 0;
            padding-bottom: 27.5%;
            width: $rem*230;
            height: $rem*238;
            &-item{
                position: absolute;
                z-index:3;
                top: 0;
                width: 100%;
                height: 100%;
                bottom: 0;
                left: 0;
                transform-style: preserve-3d;
                 transform-origin: 50% 50% 0;

                &.rollback{
                    //控制文字显示
                    .back{
                        text-indent:0;
                    }
                }
                //未中奖
                &.bg-left{
                    .back{
                        background-position: left center;
                        text-indent:-$rem*9999;
                    }
                }
                .face{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-image: url(#{$imgPath}poker_back.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
                .back{
                    position:absolute;
                    width: 100%;
                    height: 100%;
                    background-image: url(#{$imgPath}poker_result.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: right center;
                    -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                    color:#fff;
                    font-size:$rem*28;
                    text-align: center;
                    line-height: 1100%;
                    text-indent:$rem*-9999;
                    strong{
                        font-size: $rem*56;
                    }
                    img{
                        position:absolute;
                        left:0;
                        top:0;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .start-btn{
            width: $rem*230;
            height: $rem*238;
            background: url(#{$imgPath}poker_start_btn2.png) no-repeat;
            background-size:contain;
            text-align:center;
            font-size:$rem*60;
            color:#f04528;
            font-weight: bold;
            padding: $rem*40 $rem*30;
            line-height: 1.2;
            &.invalid{
                filter: grayscale(1);
            }
        }
    }

    &-dialog{
        border:$rem*6 solid #c31c21;
        border-radius:$rem*6;
        background:#fff;
        padding:$rem*30;
        min-width: $rem*490;
        position:fixed;
        top:50%;
        left:50%;
        z-index:100;
        display: none;
        transform:translate(-50%,-50%);
        &.open{
            display: block;
        }
        &-hd{
            position:relative;
            .close-btn{
                position:absolute;
                height: $rem*50;
                width: $rem*50;
                background:#c31c21;
                text-align: center;
                line-height: $rem*50;
                color:#fff;
                font-size:$rem*22;
                right:$rem*-50;
                top:$rem*-50;
                border-radius:50%;
            }
        }
        &-bd{
            text-align: center;
            color:#c31c21;
            font-size:$rem*30;
        }
        .content{
            margin-bottom: $rem*50;
            small{
                font-size:$rem*18;
                color: #666;
                line-height: 1.5;
                    display: block;
            }
        }
        .btn{
            border-radius:$rem*4;
            font-size:$rem*28;
            padding:$rem*10 $rem*24;
        }
        .btn-primary{
            background:#c31c21;
            color:#fff;
        }
        .btn-outline{
            background:#fff;
            color:#c31c21;
            border:1px solid #c31c21;
        }
        .btn-w-full{
            width: 100%;
        }
        &-mask{
            &.open{
                display: block;
            }
            display: none;
            z-index:99;
            position: fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            background:rgba(0,0,0,.6);
        }
    }
}

.sf-area-hd{
    background-size: contain;
    background-repeat:no-repeat;
}

.poker-area{
    background:#f04528;
    .sf-area-hd{
        height: $rem*90;
        background-image: url(#{$imgPath}poker_header.jpg);
    }
}
//整点抢
.int-point-area{
    padding-bottom:$rem*34;
    position: relative;
    .sf-area-hd{
        height: $rem*100;
        background-image: url(#{$imgPath}sf-hd-02.jpg);
        margin-bottom: $rem*26;
    }
    .sf-area-bd{
        padding:0 $rem*10;
    }
    .special{
        &-title{
            background:#f3f877;
            height: $rem*46;
            margin-bottom:$rem*5;
            position:relative;
            padding-left:$rem*135;
            color:#f04528;
            font-size:$rem*30;
            &:before{
                content: '';
                background: url(#{$imgPath}clock.png) no-repeat;
                @extends .bg__full;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                position:absolute;
                width: $rem*117;
                height:$rem*89;
                left:0;
                bottom:0;
            }
            // .btn-switch{
            //     background:#f04528;
            //     height: $rem*46;
            //     &>span{
            //         background:#f3f877;
            //         width: $rem*46;
            //         height: 100%;
            //         line-height: $rem*46;
            //         display: inline-block;
            //         margin-left: $rem*5;

            //         &:before{
            //             content: ' ';
            //             display: block;
            //             width: 0;
            //             height: 0;
            //             border:$rem*14 solid rgba(0,0,0,0);
            //             margin:0 auto;
            //             margin-top: $rem*9;
            //         }
            //         &:first-child{
            //             &:before{
            //                border-right-color:#f04528;
            //                margin-left:0;
            //             }
            //         }
            //         &:last-child{
            //             &:before{
            //                border-left-color:#f04528;
            //                margin-right:0;
            //             }
            //         }
            //         &.invalid{
            //             &:first-child{
            //                 &:before{
            //                    border-right-color:#eacc64;
            //                 }
            //             }
            //             &:last-child{
            //                 &:before{
            //                    border-left-color:#eacc64;
            //                 }
            //             }
            //         }

            //     }
            // }
        }
    }
    .swiper-slide{
        width: 100%;
        background:#fff;
    }
    .int-point-area-slide{
        &-triggers{
            position:absolute;
            bottom:$rem*35;
            left:0;
            width:100%;
            text-align: center;
            z-index:3;
            &>span{
                width: $rem*16;
                height: $rem*16;
                border-radius:50%;
                background:#a0a0a0;
                margin-right:$rem*15;
                display: inline-block;
                &.swiper-pagination-bullet-active{
                    background: #f04528;
                }
            }
        }

    }
}

//专场
.special-product-area{
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding:$rem*18;
    position:relative;
    min-height: $rem*350;
    .pic{
        width: $rem*318;
        height:$rem*291;
        background-repeat:no-repeat;
        background-size:contain;
        margin-right: $rem*35;
        position:absolute;
    }
    .info{
        flex:1;
        text-align:left;
        float: left;
        padding-left:$rem*320;
        h3{
            font-size: $rem*25;
            color:#333;
            height: $rem*74;
            white-space: normal;
            @include textOverFlow(2);
        }
        .country{
            font-size: $rem*18;
            color:#999;
            margin-top: $rem*10;
            .flag{
                display: inline-block;
                height:$rem*25;
                width:$rem*25;
                border-radius:50%;
                background-repeat:no-repeat;
                background-size:contain;
                    vertical-align: middle;
                    margin-right:$rem*5;
            }
        }
        .price{
            color:#f04528;
            font-size: $rem*34;
            strong{
                font-size:$rem*60;
            }
            small{
                font-size:$rem*18;
                    position: absolute;
                    margin-top: $rem*10;
                    margin-left:$rem*10;
            }
        }
        .stock{
            border-radius:$rem*8;
            border:1px dashed #f04528;
            color:#ff5247;
            font-size:$rem*24;
            padding:$rem*4 $rem*12;
            margin-right:$rem*10;
        }
        .see-live{
            padding:$rem*4 $rem*12;
            background:#f04528;
            color:#fff;
            font-size:$rem*24;
            border-radius:$rem*8;
        }
    }
}

.sf-goods{
    background:#f04528;
    &-banner{
        background-size:contain;
        background-repeat:no-repeat;
        height: $rem*306;
    }
    &-tab{
        padding:$rem*8 $rem*5;
        &-wrapper{
            padding:$rem*8;

        }
        &-hd{
            border:$rem*8 solid #d72d10;
            background:#d72d10;
            border-radius:$rem*20;
            @include clearfix();
            &-item{
                border-radius:$rem*20;
                height:$rem*88;
                line-height:$rem*88;
                color:#fff;
                float: left;
                width: 33.333333%;
                text-align: center;
                &.selected{
                    background:#faf3c4;
                    color:#f04528;
                }
            }
        }
    }
    &-sub-tab{
        background: #f04528;
        &-wrapper{
            height: $rem*190;
        }
        &.fixed{
            position:fixed;
            top:0;
            left:0;
            width: 100%;
            z-index:10;
        }
        &-list{
            @include clearfix();
        }
        &-item{
            float: left;
            width: 33.333%;
            margin-bottom: $rem*7;
            padding-right: $rem*3;
            &>div{
                height: $rem*88;
                line-height: $rem*88;
                font-size: $rem*30;
                color:#faf3c4;
                text-align: center;
                background:#d72d10;
            }
            &.active{
                &>div{
                    background:#fcddae;
                    color:#f04528;
                }
            }
        }
    }
}

//必买清单
.buy-detail{
    &-area{
        padding:0 $rem*8;
        border-bottom:$rem*5 solid #faf3c4;
        .sf-area-hd{
            height: $rem*122;
        }
        .pro-detail{
            margin-top: $rem*15;
            background:#fff;
            border-radius:$rem*8;
            padding:$rem*18 0;
            font-size:$rem*25;
            color:#2c2c2c;
            .pic{
                width:$rem*236;
                height:$rem*236;
                background-repeat:no-repeat;
                background-size:contain;
            }
            h4{
                padding:0 $rem*14;
                height: $rem*37;
                overflow: hidden;
                text-overflow:ellipsis
            }
            .price{
                text-align: center;
                color:#ef3b3b;
                strong{
                    font-size:$rem*36;
                }
            }
        }

        .swiper-pagination{
            &-wrapper{
                text-align: center;
            }
            padding:$rem*10 $rem*60;
            background:#d72d10;
            border-radius:$rem*50;
            margin-top: $rem*17;
            display: inline-block;
            overflow: hidden;
            &>span{
               height: $rem*16;
               width:$rem*16;
               border-radius:50%;
               margin-right:$rem*15;
               float: left;
               background:rgba(255,255,255,.4);

               &.swiper-pagination-bullet-active{
                background:#fff;
               }
            }
        }
    }
    &-item{
        background:#f04528;
    }
}

@include column('.buy-detail-',3,$rem*8);

.class-joint{
    margin-top: $rem*10;
    .sf-area-hd{
        background-size:contain;
        background-repeat:no-repeat;
        height: $rem*90;
    }
    .bf-list{
        padding:0 $rem*10;
    }
}

//组合商品
.goods-group{
    &-area{
        padding:0 $rem*10;
    }
    &-list{

    }
    &-item{
        background:#fff;
        margin-bottom: $rem*12;
        padding:$rem*10 $rem*12;
        position:relative;
        min-height:$rem*337;
        @include clearfix();
 //       display: flex;
        .pic{
            width: $rem*316;
            height: $rem*316;
            background-repeat:no-repeat;
            background-size:contain;
            background-position: center;
            margin-right: $rem*25;
            position:absolute;
        }
        .info{
            //flex:1;
            float:left;
            padding-left:$rem*350;
            h3{
                font-size: $rem*25;
                color:#333;
                height: $rem*74;
            }
            .country{
                margin-top: $rem*40;
                font-size: $rem*18;
                color:#999;
                margin-top: $rem*10;
                .flag{
                    display: inline-block;
                    height:$rem*25;
                    width:$rem*25;
                    border-radius:50%;
                    background-repeat:no-repeat;
                    background-size:contain;
                        vertical-align: middle;
                        margin-right:$rem*5;
                }
            }
            .options{
                font-size:$rem*25;
                color:#333;
                line-height: 1.2;
                float: left;
                margin-right: $rem*20;
                input[type=radio]{
                    display: none;
                    &:checked{
                        +label{
                           &>.disguise-radio{
                            border:0;
                            background:url() no-repeat ;
                            background-size:contain;
                           }
                        }
                    }
                }
                &-radio{
                    &>.disguise-radio{
                        transition: background 0.25s ease-in-out;
                        display: inline-block;
                        width: $rem*28;
                        height: $rem*28;
                        border-radius:50%;
                        border:1px solid #f33633;
                        vertical-align: text-bottom;
                        margin-right:$rem*5;
                    }
                }
            }
            .catalogs{
                white-space: nowrap;
            }
            .price{
                color:#f04528;
                strong{
                    font-size:$rem*58;
                }
            }
            .btn.buy-now{
                background:#f04528;
                border-radius:$rem*4;
                color:#fff;
                height: $rem*99;
                font-size:$rem*32;
                width: $rem*99;
                white-space: normal;
                margin-top: $rem*20;
            }
        }
    }
}

.ws-android{
    .swiper-wrapper{
        white-space: nowrap;
        .swiper-slide{
            display: inline-block;
        }
    }
}

.sf-swiper{
    overflow: hidden;
    .swiper-wrapper{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: block;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        //white-space: nowrap;
        &_3col{
            .swiper-slide{
                flex-shrink: 3;
            }
        }
    }

    .swiper-slide{
       display:inline-block;
       text-align: center;
       display: -webkit-box;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-shrink: 0;
       position: relative;


    }

}

//分类入口
.classify-entry{
    @include clearfix();
    border-top:$rem*6 solid #fff;
    padding:$rem*20 0 $rem*30 $rem*10;
    &-item{
        margin-right: $rem*10;
        width: $rem*237;
        height:$rem*358;
        background-size:contain;
        background-repeat:no-repeat;
        float: left;
        &:last-child{
            margin-right:0;
        }
    }
}

.stockists-area{
    padding-bottom:$rem*10;
    .sf-area-hd{
        height:$rem*100;
        margin-bottom: $rem*20;
    }
}
